.index {
  --title-color: var(--gray-8);
  --subt-title-color: var(--gray-7);
  --hover-background-color: var(--gray-0);

  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  overflow-y: auto;
  height: 100%;
  width: 100%;
  padding: 24px 32px;
  .header {
    font-size: 18px;
    color: var(--title-color);
    font-weight: bold;
  }

  .form {
    padding: 12px 0;
    > * + * {
      margin-top: 8px;
    }
    .content {
      font-size: 13px;
      color: #999;
      line-height: 1.5;
    }
  }

  .topics {
    padding: 12px 0;
    margin: -8px;
    .item {
      padding: 8px;
      line-height: 1.6;
      cursor: pointer;
      .title {
        font-size: 14px;
        color: var(--subt-title-color);
        padding-bottom: 2px;
      }
      .template {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 11px;
        color: #999;
      }
      &:hover {
        background: var(--hover-background-color);
        border-radius: 8px;
      }
    }
  }
}

